<template>
  <div class="home">
    <Search />
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in swiperList" :key="index">
        <img :src="item.image_src" alt />
      </van-swipe-item>
    </van-swipe>
    <!--  -->
    <van-grid :border="false" :column-num="4">
      <van-grid-item v-for="(item,index) in cateList" :key="index">
        <van-image :src="item.image_src" />
      </van-grid-item>
    </van-grid>
    <div class="index_floor" v-for="(item1,index1) in floorList" :key="index1">
      <div class="floor_group">
        <!-- 标题 -->
        <div class="floor_title">
          <img :src="item1.floor_title.image_src" alt />
        </div>
        <!-- 内容 -->
        <div class="floor_list">
          <div v-for="(item2,index2) in item1.product_list" :key="index2" class="navigator">
            <img :src="item2.image_src" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Search from '../components/Search'
export default {
  components: { Search },
  data() {
    return {
      interval: 1000,
      swiperList: [],
      cateList: [],
      floorList: []
    }
  },
  computed: {},
  methods: {
    // 轮播图
    async getSwiperList() {
      console.log('首页-轮播图')
      const { data: res } = await this.$http.get('/home/swiperdata')
      console.log(res.message)
      this.swiperList = res.message
      console.log(this.swiperList)
    },
    // 导航
    async getCateList() {
      const { data: res } = await this.$http.get('/home/catitems')
      this.cateList = res.message
    },
    async getFloorList() {
      const { data: res } = await this.$http.get('/home/floordata')
      this.floorList = res.message
    }
  },
  created() {
    this.getSwiperList()
    this.getCateList()
    this.getFloorList()
  }
}
</script>
<style lang='less' scoped>
.home {
  // overflow: hidden;
}
.van-swipe-item {
  img {
    width: 100%;
    height: 170px;
  }
}
// 楼层
.index_floor {
  width: 100wv;
  .floor_group {
    width: 100%;
    // 标题
    .floor_title {
      width: 100%;
      padding: 10rpx 0;
      > img {
        width: 100%;
        height: 60rpx;
      }
    }
    // 图片列表区
    .floor_list {
      // 清除浮动--正常方法
      overflow: hidden;
      .navigator {
        float: left;
        width: 33.3%;
        &:nth-child(1) {
          // 第1张图片232px*386px，按比例计算高度
          height: 33.3vw * 386/232;
        }
        // 后4张
        &:nth-last-child(-n + 4) {
          height: 33.3vw * 386/232/2;
          border-left: 5px solid #fff;
        }
        &:nth-child(2),
        &:nth-child(3) {
          border-bottom: 5px solid #fff;
        }
        > img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
